@charset "utf-8";

/*
 * aciTree jQuery Plugin
 * http://acoderinsights.ro
 *
*/

.aciTree {
    outline: none;
	width: 300px;
	height: 400px;
	overflow: auto;
	border-right: 1px solid #ccc;
}


/* the big loader */
.aciTree.aciTreeLoad {
    background:url(images/load-root.gif) center center no-repeat;
}

.aciTree .aciTreeUl {
    list-style:none;
    margin:0;
    padding:0;
}
.aciTree .aciTreeLi {
    display:block;
    clear:both;
    white-space:nowrap;
}

.aciTree .aciTreeLi.aciTreeHidden {
    display:none;
}

/* the branch line */
.aciTree .aciTreeBranch {
    padding-left:20px; /* branch indent */
    background:url(images/tree.png) -130px 0 repeat-y;
}
.aciTree[dir=rtl] .aciTreeBranch {
    padding-left:0;
    padding-right:20px; /* branch indent */
    background:url(images/tree-branch-rtl.png) right 0 repeat-y;
}
/* if the parent is the last child on his level (this is level based; added for #8 levels, if you need more ... add them as needed) */
.aciTree .aciTreeLi.aciTreeLevel0.aciTreeLast .aciTreeBranch.aciTreeLevel0,
.aciTree .aciTreeLi.aciTreeLevel1.aciTreeLast .aciTreeBranch.aciTreeLevel1,
.aciTree .aciTreeLi.aciTreeLevel2.aciTreeLast .aciTreeBranch.aciTreeLevel2,
.aciTree .aciTreeLi.aciTreeLevel3.aciTreeLast .aciTreeBranch.aciTreeLevel3,
.aciTree .aciTreeLi.aciTreeLevel4.aciTreeLast .aciTreeBranch.aciTreeLevel4,
.aciTree .aciTreeLi.aciTreeLevel5.aciTreeLast .aciTreeBranch.aciTreeLevel5,
.aciTree .aciTreeLi.aciTreeLevel6.aciTreeLast .aciTreeBranch.aciTreeLevel6,
.aciTree .aciTreeLi.aciTreeLevel7.aciTreeLast .aciTreeBranch.aciTreeLevel7,
.aciTree .aciTreeLi.aciTreeLevel8.aciTreeLast .aciTreeBranch.aciTreeLevel8,
.aciTree.aciTreeNoBranches .aciTreeBranch {
    background:none;
}
/* the branch line behind the button (for the siblings) */
.aciTree .aciTreeEntry {
    overflow:hidden;
    background:url(images/tree.png) -130px 0 repeat-y;
}
.aciTree[dir=rtl] .aciTreeEntry {
    background:url(images/tree-branch-rtl.png) right 0 repeat-y;
}
.aciTree .aciTreeLi.aciTreeLast>.aciTreeLine .aciTreeEntry,
.aciTree.aciTreeNoBranches .aciTreeEntry {
    background:none;
}

.aciTree .aciTreeButton, .aciTree .aciTreeItem, .aciTree .aciTreeIcon, .aciTree .aciTreeText, .aciTree .aciTreeColumn {
    display:inline-block;
    height:20px;
    line-height:20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    vertical-align:top;
}
.aciTree .aciTreeItem {
    padding:0 2px 0 2px;
    border:1px dashed transparent;
    height:auto;
    white-space:normal;
    cursor:pointer;
    /* margin-right need to be set to icon width [.aciTree .aciTreeIcon : 18] + 
    item padding [.aciTree .aciTreeItem : 4] (+ the width of all columns, if any) */
    margin-right:22px;
}
.aciTree[dir=rtl] .aciTreeItem{
    margin-right:0;
    /* margin-left need to be set to icon width [.aciTree .aciTreeIcon : 18] + 
    item padding [.aciTree .aciTreeItem : 4] (+ the width of all columns, if any) */
    margin-left:22px;
}
.aciTree .aciTreeText {
    display:inline;
    height:auto;
}
.aciTree .aciTreeColumn {
    float:right;
    height:auto;
    white-space:normal;
    cursor:default;
}
.aciTree[dir=rtl] .aciTreeColumn {
    float:left;
}

/* columns width/style (left to right, if any) */

.aciTree .aciTreeColumn0 {
    width:80px;
}
.aciTree .aciTreeColumn1 {
    width:60px;
}

/* item selection */

.aciTree .aciTreeLine.aciTreeHover .aciTreeItem {
    background-color:#EFF5FD;
    border:1px dashed #D9D9D9;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.aciTree .aciTreeSelected>.aciTreeLine .aciTreeItem {
    background-color:#E8E8E8;
    border:1px dashed #D9D9D9;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.aciTree.aciTreeFocus .aciTreeSelected>.aciTreeLine .aciTreeItem {
    background-color:#d0e5fe;
    border:1px dashed #84acdd;
}

/* full row selection */

.aciTree.aciTreeFullRow .aciTreeLine.aciTreeHover .aciTreeItem {
    background:none;
    border:1px dashed transparent;
}
.aciTree.aciTreeFullRow .aciTreeSelected>.aciTreeLine .aciTreeItem {
    background:none;
    border:1px dashed transparent;
}
.aciTree.aciTreeFullRow.aciTreeFocus .aciTreeSelected>.aciTreeLine .aciTreeItem {
    background:none;
    border:1px dashed transparent;
}

.aciTree.aciTreeFullRow .aciTreeLine.aciTreeHover {
    background: #e3edf9;
    background: -moz-linear-gradient(top,  #e3edf9 0%, #9cb7d8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3edf9), color-stop(100%,#9cb7d8));
    background: -webkit-linear-gradient(top,  #e3edf9 0%,#9cb7d8 100%);
    background: -o-linear-gradient(top,  #e3edf9 0%,#9cb7d8 100%);
    background: -ms-linear-gradient(top,  #e3edf9 0%,#9cb7d8 100%);
    background: linear-gradient(to bottom,  #e3edf9 0%,#9cb7d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3edf9', endColorstr='#9cb7d8',GradientType=0 );
}
.aciTree.aciTreeFullRow .aciTreeSelected>.aciTreeLine {
    background: #f4f4f4;
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #c6c6c6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#c6c6c6));
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#c6c6c6 100%);
    background: -o-linear-gradient(top,  #f4f4f4 0%,#c6c6c6 100%);
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#c6c6c6 100%);
    background: linear-gradient(to bottom,  #f4f4f4 0%,#c6c6c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#c6c6c6',GradientType=0 );
}
.aciTree.aciTreeFullRow.aciTreeFocus .aciTreeSelected>.aciTreeLine {
    background: #d0e5fe;
    background: -moz-linear-gradient(top,  #d0e5fe 0%, #84acdd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e5fe), color-stop(100%,#84acdd));
    background: -webkit-linear-gradient(top,  #d0e5fe 0%,#84acdd 100%);
    background: -o-linear-gradient(top,  #d0e5fe 0%,#84acdd 100%);
    background: -ms-linear-gradient(top,  #d0e5fe 0%,#84acdd 100%);
    background: linear-gradient(to bottom,  #d0e5fe 0%,#84acdd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e5fe', endColorstr='#84acdd',GradientType=0 );
}
.aciTree.aciTreeFullRow.aciTreeFocus .aciTreeSelected>.aciTreeLine.aciTreeHover,
.aciTree.aciTreeFullRow .aciTreeSelected>.aciTreeLine.aciTreeHover {
    background: #c3dbf7;
    background: -moz-linear-gradient(top,  #c3dbf7 0%, #84a9d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3dbf7), color-stop(100%,#84a9d6));
    background: -webkit-linear-gradient(top,  #c3dbf7 0%,#84a9d6 100%);
    background: -o-linear-gradient(top,  #c3dbf7 0%,#84a9d6 100%);
    background: -ms-linear-gradient(top,  #c3dbf7 0%,#84a9d6 100%);
    background: linear-gradient(to bottom,  #c3dbf7 0%,#84a9d6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3dbf7', endColorstr='#84a9d6',GradientType=0 );
}

/* checkbox/radio tree */

.aciTree .aciTreeCheckbox label, .aciTree .aciTreeRadio label {
    cursor:pointer;
}
.aciTree .aciTreeCheckbox input[type=checkbox], .aciTree .aciTreeRadio input[type=radio] {
    margin-left:2px;
    margin-right:4px;
    padding:0;
    vertical-align:text-bottom;
}
.aciTree .aciTreeSelected .aciTreeCheckbox input[type=checkbox], .aciTree .aciTreeSelected .aciTreeRadio input[type=radio] {
    outline: none;
}
.aciTree .aciTreeCheckbox input[type=checkbox].aciTreeTristate {
    opacity:0.6;
    filter: alpha(opacity = 60);
}

/* inplace editable */

.aciTree .aciTreeEdited input[type=text] {
    outline: none;
    border:1px solid #000;
    padding:0;
    margin:0;
    line-height:18px;
    height:18px;
    display:inline-block;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    vertical-align:top;
}

/* sortable items */

.aciTree .aciTreeChild {
    height:0;
    line-height:0;
}

.aciTree .aciTreePlaceholder {
    height:0;
    line-height:0;
    overflow:show;
    position:relative;
}

.aciTree .aciTreePlaceholder div {
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    margin-left:20px;
    background:#ccc url(images/drag-drop.png) 0 0 no-repeat;
    border:1px solid #999;
}

.aciTree .aciTreeChild .aciTreePlaceholder div {
    top:-20px;
    left:-18px;
}

.aciTree .aciTreePlaceholder.aciTreeBefore div { 
    background-position:-32px 0 !important; 
}
.aciTree .aciTreePlaceholder.aciTreeAfter div { 
    top:-20px;
    background-position:-16px 0 !important; 
}

.aciTree.aciTreeDragDrop .aciTreeItem, .aciTree.aciTreeDragDrop .aciTreeColumn,
.aciTree.aciTreeDragDrop .aciTreeCheckbox label, .aciTree.aciTreeDragDrop .aciTreeRadio label {
    cursor:inherit !important;
}

/* this is level based; added for #8 levels, if you need more ... add them as needed */
.aciTree .aciTreeLi.aciTreeLevel0 .aciTreePlaceholder div { margin-left:40px; }
.aciTree .aciTreeLi.aciTreeLevel1 .aciTreePlaceholder div { margin-left:60px; }
.aciTree .aciTreeLi.aciTreeLevel2 .aciTreePlaceholder div { margin-left:80px; }
.aciTree .aciTreeLi.aciTreeLevel3 .aciTreePlaceholder div { margin-left:100px; }
.aciTree .aciTreeLi.aciTreeLevel4 .aciTreePlaceholder div { margin-left:120px; }
.aciTree .aciTreeLi.aciTreeLevel5 .aciTreePlaceholder div { margin-left:140px; }
.aciTree .aciTreeLi.aciTreeLevel6 .aciTreePlaceholder div { margin-left:160px; }
.aciTree .aciTreeLi.aciTreeLevel7 .aciTreePlaceholder div { margin-left:180px; }
.aciTree .aciTreeLi.aciTreeLevel8 .aciTreePlaceholder div { margin-left:200px; }

.aciTree[dir=rtl] .aciTreePlaceholder div {
    left:auto;
    right:4px;    
    margin-left:0;
    margin-right:20px;
    background-position:-48px 0;
}

.aciTree .aciTreeChild .aciTreePlaceholder div {
    right:-16px;
}

/* this is level based; added for #8 levels, if you need more ... add them as needed */
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel0 .aciTreePlaceholder div { margin-right:40px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel1 .aciTreePlaceholder div { margin-right:60px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel2 .aciTreePlaceholder div { margin-right:80px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel3 .aciTreePlaceholder div { margin-right:100px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel4 .aciTreePlaceholder div { margin-right:120px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel5 .aciTreePlaceholder div { margin-right:140px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel6 .aciTreePlaceholder div { margin-right:160px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel7 .aciTreePlaceholder div { margin-right:180px; }
.aciTree[dir=rtl] .aciTreeLi.aciTreeLevel8 .aciTreePlaceholder div { margin-right:200px; }

.aciTreeHelper {
    position:absolute;
    max-width:300px;
    color:#000;
    background-color:#d0e5fe;
    border:1px dashed #84acdd;    
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;    
    padding:4px;
    margin:20px 0 0 20px;
}

/* default - item in the middle (comment the hover part to keep the same button image) */

.aciTree .aciTreeButton {
    width:16px;
    margin-left:4px;
    background:url(images/tree.png) 0 -20px no-repeat;
}
.aciTree[dir=rtl] .aciTreeButton {
    margin-left:0;
    margin-right:4px;
    background:url(images/tree-rtl.png) 0 -20px no-repeat;
}
.aciTree.aciTreeNoBranches .aciTreeButton { 
    background:url(images/tree-no-branches.png) 0 -20px no-repeat; 
}
.aciTree.aciTreeNoBranches[dir=rtl] .aciTreeButton { 
    background:url(images/tree-no-branches-rtl.png) 0 -20px no-repeat; 
}

.aciTree .aciTreeFolderMaybe>.aciTreeLine .aciTreeButton { background-position:-16px -20px; }
.aciTree .aciTreeFolderMaybe>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-32px -20px; }
.aciTree .aciTreeFolder>.aciTreeLine .aciTreeButton { background-position:-48px -20px; }
.aciTree .aciTreeFolder>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-64px -20px; }
.aciTree .aciTreeOpen>.aciTreeLine .aciTreeButton { background-position:-80px -20px; }
.aciTree .aciTreeOpen>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-96px -20px; }

/* if it's the last item in list (comment the hover part to keep the same button image) */

.aciTree .aciTreeLi.aciTreeLast>.aciTreeLine .aciTreeButton { background-position:0 -60px; }
.aciTree .aciTreeFolderMaybe.aciTreeLast>.aciTreeLine .aciTreeButton { background-position:-16px -60px; }
.aciTree .aciTreeFolderMaybe.aciTreeLast>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-32px -60px; }
.aciTree .aciTreeFolder.aciTreeLast>.aciTreeLine .aciTreeButton { background-position:-48px -60px; }
.aciTree .aciTreeFolder.aciTreeLast>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-64px -60px; }
.aciTree .aciTreeOpen.aciTreeLast>.aciTreeLine .aciTreeButton { background-position:-80px -60px; }
.aciTree .aciTreeOpen.aciTreeLast>.aciTreeLine .aciTreeButton.aciTreeHover { background-position:-96px -60px; }

/* the item loader */

.aciTree .aciTreeButton>span {
    display:none;
    position:absolute;
    width:16px;
    height:16px;
    left:-4px;
    top:2px;
    background:url(images/load-node.gif) 0 0 no-repeat;
}
.aciTree[dir=rtl] .aciTreeButton>span {
    right:-1px;
}
.aciTree .aciTreeLoad>.aciTreeLine .aciTreeButton {
    position:relative;
    /* uncomment next line to hide the button while loading */
    /*background:none !important;*/
}
.aciTree .aciTreeLoad>.aciTreeLine .aciTreeButton>span {
    display:inline-block;
}

/* tree item icon */

.aciTree .aciTreeIcon {
    width:18px;
    background:url(images/tree.png) 0 0 no-repeat;
}
.aciTree[dir=rtl] .aciTreeIcon {
    margin-left:1px;
    background:url(images/tree-rtl.png) 0 0 no-repeat;
}
.aciTree.aciTreeNoBranches .aciTreeIcon { background:url(images/tree-no-branches.png) 0 0 no-repeat; }
.aciTree.aciTreeNoBranches[dir=rtl] .aciTreeIcon { background:url(images/tree-no-branches-rtl.png) 0 0 no-repeat; }

/* demo file/folder icon class */

.aciTree .aciTreeIcon.folder {
    background-position:-112px 0 !important;
}
.aciTree .aciTreeLine.aciTreeHover .aciTreeIcon.folder {
    /* comment next line to keep the same icon on hover */
    background-position:-112px -20px !important;
}
.aciTree .aciTreeIcon.file {
    background-position:-112px -40px !important;
}
.aciTree .aciTreeLine.aciTreeHover .aciTreeIcon.file {
    /* comment next line to keep the same icon on hover */
    background-position:-112px -60px !important;
}

/* demo row colors */

.aciTree.aciTreeColors .aciTreeOdd>.aciTreeLine {
    /* odd rows */
    background-color:#FFFFC4;
}
.aciTree.aciTreeColors .aciTreeEven>.aciTreeLine {
    /* even rows */
    background-color:#CAFFCA;
}
.aciTree.aciTreeColors .aciTreeFirst>.aciTreeLine {
    /* first item on each level */
    /*background-color:#B0DFFF;*/
}
.aciTree.aciTreeColors .aciTreeLast>.aciTreeLine {
    /* last item on each level */
    /*background-color:#FFCEFF;*/
}
